<template>
  <view class="ver-layout">
    <!-- 上面的布局  -->
    <view class="top-layout hor-layout-side-center">
      <view class="top-side hor-layout-center" @click="changeWeekNum(-1)">
        <i class="iconfont">&#xe625;</i>
        <span>前一周</span>
      </view>
      <view class="top-title"> 第{{ weekObj.currentWeek }}周</view>
      <view class="top-side hor-layout-center" @click="changeWeekNum(1)">
        <span>后一周</span>
        <i class="iconfont">&#xe627;</i>
      </view>
    </view>
    <!--  星期天标签行  -->
    <view class="week-day-layout hor-layout">
      <!--  每列对应周的天 -->
      <view v-for="(day,wIdx) in weekDays" :key="wIdx" class="week-day-schedule week-day-title ver-layout-center-all">
        <view>{{ day.title }}</view>
        <view class="week-day-text" v-if="wIdx!==0">{{ day.daynum }}日</view>
      </view>
    </view>
    <!-- 课表布局   -->
    <view class="hor-layout schedule-layout">
      <!--  按周将表格分成竖向的列(将横向长度分割成8份)  -->
      <view v-for="(day,wIdx) in weekDays" :key="wIdx" class="week-day-schedule ver-layout">
        <!--  第一列显示时间列表(将竖向长度分割成lessonTimes长度的单元格) -->
        <block v-if="wIdx===0">
          <view v-for="(time,lIdx) in lessonTimes" :key="lIdx" class="day-lesson-time ver-layout-center-all">
            <view style="color: #666666"> {{ time }}</view>
          </view>
        </block>
        <!-- 其他列显示课程内容(将竖向长度分割成lessonTimes长度-1的单元格) -->
        <block v-else>
          <view style="height: 30px"></view>
          <view v-for="(section,lIdx) in getDayLessonList(day)" :key="lIdx" class="schedule-item ver-layout-center-all"
                :class="{'content':section.week,'top':lIdx===0}" :style="getDayLessonStyle(section)">
            <block v-if="section.week">
              <view class="schedule-item-text" style="color: #666666">{{ section.course_title }}</view>
              <view class="schedule-item-text"> {{ section.room_name }}</view>
              <view class="schedule-item-text"> {{ section.student_name }}</view>
            </block>
          </view>
          <view style="height: 30px"></view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
import {SelectTeacherApi} from "@/api/enterStudent.js"

// let testData = require("./schedule.json") //测试数据
let engine = new SelectTeacherApi()
export default {
  name: "teacherSchedule",
  data() {
    return {
      weekDays: [],//标题栏数组
      lessonTimes: ['08:00', '09:00', '10:10', '11:00', '15:00', '16:00', '17:00', '18:00', '19:30', '20:30', '21:30', '22:30'],
      scheduleList: [],//根据上面的lessonTimes数据和接口返回的数据组装成新的每列（每天）的日程列表数据
      weekObj: {totalWeek: 52, currentWeek: ''},
      teacherObj: {}
    }
  },
  onLoad(options) {
    uni.setNavigationBarTitle({title: `${options.name}的课表`})
    // this.weekObj = getYearWeek() //这里的不准
    this.teacherObj = options
    this.getTeacherSchedules()
    // this.scheduleTest(testData) //测试数据
  },
  methods: {
    scheduleTest(res) {
      this.generateScheduleTitle(res.data)
      this.generateScheduleTable(res.data)
      if (res.data.length > 0) this.weekObj.currentWeek = parseInt(res.data[0].week)
    },
    getTeacherSchedules() {
      let week = this.weekObj.currentWeek
      let teacher_id = this.teacherObj.id
      engine.getTeacherSchedules({week, teacher_id}).then(res => {
        this.generateScheduleTitle(res.data)
        this.generateScheduleTable(res.data)
        if (res.data.length > 0) this.weekObj.currentWeek = parseInt(res.data[0].week)
      })
    },
    generateScheduleTitle(weekTitles) {
      //构建课表上面的周标签
      let weekDays = weekTitles.map((item, index) => {
        let titles = ['一', '二', '三', '四', '五', '六', '七']
        item.title = `周${titles[index]}`
        item.daynum = item.class_date.substr(8, 2)
        return item
      }), month = weekDays[0].class_date.substr(5, 2)
      weekDays.unshift({title: `${month}月`})
      this.weekDays = weekDays
    },
    generateScheduleTable(weekDays) {
      let lessonSpans = new Array(this.lessonTimes.length - 1).fill(1)
      lessonSpans = lessonSpans.map((item, index) => {
        return {index: index + 1, span: item}
      })
      console.log("lessonSpans", lessonSpans)
      weekDays.forEach(day => {
        day.lessons = lessonSpans
        day.section.forEach(daySd => {
          let {start_section, end_section} = daySd
          daySd.span = end_section - start_section
          daySd.index = start_section
          let left_arr = day.lessons.filter(l => l.index < start_section),
              right_arr = day.lessons.filter(l => l.index >= end_section)
          day.lessons = [...left_arr, daySd, ...right_arr]
        })
      })
      this.scheduleList = weekDays
      console.log("scheduleList", this.scheduleList)
    },
    getDayLessonList(day) {
      return this.scheduleList.find(item => item.daynum === day.daynum).lessons
    },
    getDayLessonStyle(lesson) {
      return {height: `calc(60px * ${lesson.span})`}
    },
    changeWeekNum(action) {
      if (action === 1 && this.weekObj.currentWeek === 52) {
        this.$u.toast("当前已经是最后一周！")
        return
      }
      if (action === -1 && this.weekObj.currentWeek === 1) {
        this.$u.toast("当前已经是第一周！")
        return
      }
      this.weekObj.currentWeek = this.weekObj.currentWeek + action
      this.getTeacherSchedules()
    }
  }
}
</script>

<style scoped>
.top-layout {
  position: fixed;
  width: 100%;
  height: 43px;
  padding: 0px 10px;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
}

.top-title {
  padding: 7px;
  border-radius: 3px;
  background: #42B4AB;
  /*文本样式*/
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FFFFFF;
}

.top-side {
  font-size: 14px;
  color: #666666;
}

.week-day-layout {
  position: fixed;
  margin-top: 43px;
  width: 100%;
}

.week-day-schedule {
  width: calc((100% - 40px) / 7);
}

.week-day-schedule:first-child {
  width: 40px;
}

.week-day-title {
  height: 42px;
  background: #e9eeee;
  font-size: 13px;
  color: #000000;
}

.week-day-text {
  margin-top: 2px;
  font-size: 11px;
  color: #666666;
}

.schedule-layout {
  margin-top: calc(43px + 42px);
  width: 100%;
}

.day-lesson-time {
  height: 60px;
  border-right: 1px solid lightgray;
}

.schedule-item {
  height: 60px;
  width: 100%;
  border-bottom: 1px solid lightgrey;
}

.schedule-item.top {
  border-top: 1px solid lightgrey;
}

.schedule-item.content {
  background: #55BBB3;
  border: 1px solid white;
  border-radius: 3px;
}

.schedule-item-text {
  width: 100%;
  color: #FFFFFF;
  font-size: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
</style>
